<script setup lang="ts">
import { getDnsAuthorityNodesApi } from '@/apis/modules/dns'
import { DnsNodeStatusOptions } from '@/constants/dns'
import { commonTableProps, defaultRowSelection } from '@/utils/table'
import useCommand from './actions'
import EditDialog from './components/EditorDialog.vue'
import EditRemarkDialog from './components/EditRemarkDialog.vue'
import UpdateVersion from './components/UpdateVersion.vue'
import useConfig from './useConfig'

const { tableColumns, searchSchema } = useConfig()

const queryParams = ref({})

const { loading, pagination, data, run } = useListRequest(
  getDnsAuthorityNodesApi,
  {
    params: queryParams,
    immediate: true,
  },
)

const { handleCommand } = useCommand(run)
const {
  visible: editDialogVisible,
  open: openEditDialog,
  data: editDialogData,
} = usePopup()

const {
  visible: editorRemarkDialogVisible,
  open: openEditorRemarkDialog,
  data: editorRemarkDialogData,
} = usePopup()

function shouldShowTooltip(remark: string) {
  // 判断 remark 是否存在
  if (!remark)
    return false
  // 字符数大于50时返回true，否则返回false
  return remark.length > 50 // 先按字符数快速判断
}
const {
  visible: updateVersionVisible,
  open: openUpdateVersionDialog,
  data: updateVersionDialogData,
} = usePopup()

const {
  tableRef,
  selectedKeys,
  // selectionRows,
  createSortChange,
} = useTable(run, data)
const onSorterChange = createSortChange(queryParams)
</script>

<template>
  <main-container
    v-model:pagination="pagination"
    :loading="loading"
    @run="run"
  >
    <template #header>
      <div class="flex space-x-4">
        <a-button
          type="primary"
          @click="openEditDialog()"
        >
          新建节点
        </a-button>
        <multiple-condition-search
          v-model="queryParams"
          :schema="searchSchema"
          @search="run"
        />
      </div>
    </template>
    <a-table
      ref="tableRef"
      v-model:selected-keys="selectedKeys"
      v-bind="commonTableProps"
      :columns="tableColumns"
      :data="data"
      :row-selection="defaultRowSelection"
      @sorter-change="onSorterChange"
    >
      <template #remark="{ record }">
        <div class="flex">
          <a-tooltip
            :content="record.remark || '-'"
            position="top"
            :disabled="!shouldShowTooltip(record.remark)"
          >
            <span class="overflow-hidden text-ellipsis whitespace-nowrap">
              {{ record.remark || '-' }}
            </span>
          </a-tooltip>
          <div class="ml-1 min-w-4">
            <i-icons-edit
              class="table-icon"
              size="16px"
              @click="openEditorRemarkDialog(record)"
            />
          </div>
        </div>
      </template>
      <template #version="{ record }">
        <div class="flex items-center space-x-1">
          <span>{{ record.version }}</span>
          <i-icons-node-update
            v-show="!!record.ip && record.version !== record.latest_version"
            class="cursor-pointer"
            @click="openUpdateVersionDialog([record.id])"
          />
        </div>
      </template>
      <template #runStatus="{ record }">
        <div
          v-if="Number(record.run_status) > 0"
          class="flex items-center gap-x-1"
        >
          <i-icons-node-normal v-if="record.run_status === 1" />
          <i-icons-failed v-else-if="record.run_status === 2" />
          <i-icons-node-init v-else />
          <span class="ml-1">{{
            getOptionsLabel(DnsNodeStatusOptions, record.run_status)
          }}</span>
        </div>
        <span v-else>-</span>
      </template>
      <template #actions="{ record }">
        <a-link
          v-if="!record.ip"
          :hoverable="false"
          @click="handleCommand('install_script', [record.id])"
        >
          <i-icons-install size="16px" />
        </a-link>
        <a-link
          v-else
          :hoverable="false"
          @click="openEditDialog(record)"
        >
          <i-icons-edit size="16px" />
        </a-link>
        <a-link
          :hoverable="false"
          status="danger"
          @click="handleCommand('delete', [record.id], record)"
        >
          <i-icons-delete size="16px" />
        </a-link>
      </template>
    </a-table>
    <template
      v-if="selectedKeys.length > 0"
      #total
    >
      <div class="flex-shrink-0">
        <a-button
          type="outline"
          class="mr-2"
          @click="openUpdateVersionDialog((selectedKeys || []) as string[])"
        >
          升级版本
        </a-button>
        <span class="text-color-3">{{ `已选${selectedKeys.length}条` }}</span>
      </div>
    </template>
  </main-container>
  <edit-dialog
    v-model:visible="editDialogVisible"
    :record="editDialogData"
    @reload="run"
  />
  <update-version
    v-model:visible="updateVersionVisible"
    :ids="updateVersionDialogData || []"
    @reload="run"
  />
  <edit-remark-dialog
    v-model:visible="editorRemarkDialogVisible"
    :record="editorRemarkDialogData"
    @reload="run"
  />
</template>

<style lang="less" scoped>
:deep(.arco-table-tr) {
  .table-icon {
    opacity: 0;
    color: var(--color-text-7);
    cursor: pointer;
  }

  &:hover {
    .table-copy-text {
      @apply text-primary;
    }

    .table-icon {
      opacity: 1;
      color: #00a65b;
    }
  }
}
</style>
